<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片提示</title>
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }

        img {
            border: none;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            float: left;
            display: inline;
            margin-right: 10px;
            border: 1px solid #AAAAAA;
        }

        /* tooltip */
        #tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }
		#iimg img{
			height: 400px;
			width: 400px;
		}
    </style>
    <script type="text/javascript">
         $(function(){
              	var x=1;
              	var y=1;
              	$(".tooltip").mouseover(function(){
              		$("body").append("<p id='iimg'><img src='"+this.href+"'></p>")
              		}).mouseout(function(){
              			$("#iimg").remove();
              		}).mousemove(function(a){
              			$("#iimg").css({
              			"top":(a.pageY-y)+'px',
              			"left":(a.pageX+x)+'px',
              			"position":"absolute",
              			});
              		})
              	})
    </script>
    <!--this.myTitle = this.title;
    this.title = "";-->
</head>
<body>
    <ul>
        <li>
            <a href="../Images/bxgz_big.jpeg" class="tooltip" title="白雪公主">
                <img src="../Images/bxgz.jpg" alt="白雪公主" />
            </a>
        </li>
        <li>
            <a href="../Images/sj_big.jpeg" class="tooltip" title="妖精">
                <img src="../Images/sj.jpg" alt="妖精" />
            </a>
        </li>
        <li>
            <a href="../Images/kn_big.jpeg" class="tooltip" title="柯南">
                <img src="../Images/kn.jpg" alt="柯南" />
            </a>
        </li>
        <li>
            <a href="../Images/pdx_big.jpeg" class="tooltip" title="蜡笔小新">
                <img src="../Images/pdx.png" alt="蜡笔小新" />
            </a>
        </li>
    </ul>
    <!--<br /><br /><br /><br />
    <br /><br /><br /><br />
    <h3>无效果：</h3>
    <ul>
        <li>
            <a href="/Images/apple_1_bigger.jpg" title="苹果 iPod">
                <img src="/Images/apple_1.jpg" alt="苹果 iPod" />
            </a>
        </li>
        <li>
            <a href="/Images/apple_2_bigger.jpg" title="苹果 iPod nano">
                <img src="/Images/apple_2.jpg" alt="苹果 iPod nano" />
            </a>
        </li>
        <li>
            <a href="/Images/apple_3_bigger.jpg" title="苹果 iPhone">
                <img src="/Images/apple_3.jpg" alt="苹果 iPhone" />
            </a>
        </li>
        <li>
            <a href="/Images/apple_4_bigger.jpg" title="苹果 Mac">
                <img src="/Images/apple_4.jpg" alt="苹果 Mac" />
            </a>
        </li>
    </ul>-->
</body>
</html>
